// 1.下包并引入路由
import VueRouter from "vue-router";
import Vue from "vue";
// import Home from "@/pages/Home";
// import Login from "@/pages/Login";
// import News from "@/pages/Home/News";
// import Music from "@/pages/Home/Music";
// import Game from "@/pages/Home/Game";
// import NotFound from "@/pages/NotFound";

const Home = () => import("@/pages/Home");
const Login = () => import("@/pages/Login");
const News = () => import("@/pages/Home/News");
const Music = () => import("@/pages/Home/Music");
const Game = () => import("@/pages/Home/Game");
const NotFound = () => import("@/pages/NotFound/404");
const MusicDetail =()=>import("@/pages/Home/Music/MusicDetail")
// 2.应用路由插件
Vue.use(VueRouter);

// 3.创建路由器对象，并在内部配置模式和路由表
const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/Home/News",
    },
    {
      path: "/home",
      component: Home,
      // 二级路由
      children: [
        {
          path: "news",
          component: News,
          name: "News",
        },
        {
          path: "Music",
          component: Music,
          name: "Music",
          children:[
            {
            path:"MusicDetail/:id/:age?",
            component:MusicDetail,
            name:"MusicDetail", 
            }
          ]
        },
        {
          path: "Game",
          component: Game,
          name: "Game",
        },
      ],
    },
    { 
      path: "/Login", component: Login, name: "Login" },
    {
      // 404配置
      path: "/*",
      component: NotFound,
    },
  ],
});

// 4.暴露router，注入到vue实例
export default router;
